<template>
  <div class="flex flex-row h-full" id="wrap">
    <div class="leftSide" id="leftSide">
      <div class="humanPic">
        <!-- Replace static images with mini chart + label (文字: 口腔疾病) -->
        <div :class="['mini-chart-box', 'shiwangmo', { abnormal: isMiniAbnormal('视网膜') }]">
          <!-- <div id="mini-chart-shiwangmo" class="mini-chart"></div> -->
          <div class="connector" aria-hidden="true"></div>
          <div class="mini-label">{{ getMiniLabel('视网膜', '视网膜疾病') }}</div>
        </div>
        <div :class="['mini-chart-box', 'kouqiang', { abnormal: isMiniAbnormal('口腔') }]">
          <!-- <div id="mini-chart-kouqiang" class="mini-chart"></div> -->
          <div class="connector" aria-hidden="true"></div>
          <div class="mini-label">{{ getMiniLabel('口腔', '口腔疾病') }}</div>
        </div>
        <div :class="['mini-chart-box', 'shenjing', { abnormal: isMiniAbnormal('神经') }]">
          <!-- <div id="mini-chart-shenjing" class="mini-chart"></div> -->
          <div class="connector" aria-hidden="true"></div>
          <div class="mini-label">{{ getMiniLabel('神经', '神经疾病') }}</div>
        </div>
        <div :class="['mini-chart-box', 'shen', { abnormal: isMiniAbnormal('肾') }]">
          <!-- <div id="mini-chart-shen" class="mini-chart"></div> -->
          <div class="connector" aria-hidden="true"></div>
          <div class="mini-label">{{ getMiniLabel('肾', '肾疾病') }}</div>
        </div>
        <div :class="['mini-chart-box', 'tangniaobing', { abnormal: isMiniAbnormal('糖尿') }]">
          <!-- <div id="mini-chart-tangniaobing" class="mini-chart"></div> -->
          <div class="connector" aria-hidden="true"></div>
          <div class="mini-label">{{ getMiniLabel('血糖', '糖尿病') }}</div>
        </div>
        <!-- 心血管疾病 mini chart -->
        <div :class="['mini-chart-box', 'xinxueguan', { abnormal: isMiniAbnormal('心血管') }]">
          <!-- <div id="mini-chart-xinxueguan" class="mini-chart"></div> -->
          <div class="connector" aria-hidden="true"></div>
          <div class="mini-label">{{ getMiniLabel('心血管', '心血管疾病') }}</div>
        </div>
      </div>
    </div>
    <div class="rightSide" id="rightSide">
      <div class="userInfo">
        <div><img class="border_1" src="/resource/health/img/detail/上.png" /></div>
        <div class="photo">
          <img src="/resource/health/img/detail/tb.png" />
        </div>
        <div class="intro">
          <div class="flex flex-row title">
            <!-- <div class="left">{{ userInfo.name }}</div> -->
            <div class="right">{{ userInfo.illness }}</div>
          </div>
          <div class="flex flex-row desc">
            <div class="left">{{ userInfo.sex }}，{{ userInfo.age }}岁</div>
            <div class="right result">控制满意</div>
          </div>
          <div>
            <img class="border_1 fenge" src="/resource/health/img/detail/分割线.png" alt="" />
          </div>
        </div>
        <div class="row info">
          <ul>
            <li
              >身高<span>{{ userInfo.height }}cm</span></li
            >
            <li
              >体重<span id="tizhong">{{ userInfo.weight }}</span
              ><span>斤</span></li
            >
            <li>
              BMI <span>{{ bmi || '--' }}</span>
            </li>
            <li>饮酒 <span>50ml</span></li>
            <li>抽烟 <span>无</span></li>
          </ul>
          <ul>
            <li>家族病史<span>无</span></li>
            <!-- <li>生日<span>1970-07-09</span></li> -->
            <li>治疗方案 <span>无</span></li>
            <li>病史 <span>无</span></li>
          </ul>
        </div>
        <div><img class="border_1" src="/resource/health/img/detail/下.png" /></div>
      </div>
      <div class="warning-box">
        <h3>异常告警信息</h3>
        <ul>
          <li v-if="alerts.length === 0">暂无异常</li>
          <li v-for="(a, i) in alerts" :key="i">
            <img src="/resource/health/img/detail/异常.png" alt="" />
            <span>{{ a.time }}，{{ a.text }}</span>
          </li>
        </ul>
      </div>
      <div class="chart-info">
        <ul class="nav nav-pills horizontal-tabs" id="myTab">
          <li v-for="(tab, index) in tabs" :key="index" :class="{ active: activeTab === index }">
            <a href="#" @click.prevent="setActiveTab(index)">{{ tab.label }}</a>
          </li>
        </ul>

        <div id="myTabContent" class="tab-content" style="height: 200px; width: 98%">
          <div
            v-for="(tab, index) in tabs"
            :key="index"
            :class="['tab-pane', 'fade', { active: activeTab === index, in: activeTab === index }]"
            :id="tab.id"
            style="height: 250px; overflow: hidden"
          >
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
  import { ref, onMounted, watch, nextTick } from 'vue';
  import * as echarts from 'echarts';
  import { dailySignsListData } from '/@/api/information/dailySigns';
  //import Time from './Time.vue';
  const props = defineProps({
    userInfo: Object,
    phone: String,
  });
  console.log(props.userInfo);
  console.log('phone: ' + props.phone);

  // Reactive reference for active tab index
  const activeTab = ref(0);

  // Tabs data (will be loaded from API)
  const tabs = ref([]);
  // 告警数组（最多 3 条最新）
  const alerts = ref([]);
  // 计算 BMI（假设 height 单位 cm，weight 单位 斤）
  const bmi = ref(0);
  const calcBmi = () => {
    const h = Number(props.userInfo?.height);
    let w = Number(props.userInfo?.weight);
    if (!h || !w) return;
    // 如果 weight 是以 斤为单位，先换算为 kg
    // 经验判断：如果 weight 很大（>200），很可能是斤；否则可能已是 kg
    if (w > 200) {
      w = w / 2;
    }
    const heightM = h / 100;
    if (heightM > 0) {
      bmi.value = Math.round((w / (heightM * heightM)) * 10) / 10; // 保留 1 位小数
    }
  };
  // 监听 userInfo 改变
  watch(
    () => props.userInfo,
    () => {
      calcBmi();
    },
    { immediate: true },
  );

  // 根据 props.userInfo.illness 判断每个 mini label 的显示文本
  // 如果 illness 字符串中不包含对应关键词，则返回 '正常'
  const getMiniLabel = (keyword, label) => {
    try {
      const ill = (props.userInfo && props.userInfo.illness) || '';
      if (!ill) return keyword + '正常';
      // 使用包含匹配，适配简单场景；关键词为中文一般不需要大小写处理
      return String(ill).includes(keyword) ? label : keyword + '正常';
    } catch (e) {
      return keyword + '正常';
    }
  };

  // 判断某个 mini 项是否为异常（illness 中包含 keyword）
  const isMiniAbnormal = (keyword) => {
    try {
      const ill = (props.userInfo && props.userInfo.illness) || '';
      if (!ill) return false;
      return String(ill).includes(keyword);
    } catch (e) {
      return false;
    }
  };

  // Tabs will be loaded from API and mapped inline
  const chartInstances = {}; // 存储每个 tab 的 ECharts 实例

  // 初始化图表
  const initChart = (chartId, option) => {
    console.log(chartId);
    if (chartInstances[chartId]) {
      // 图表实例已存在时只更新选项和尺寸
      chartInstances[chartId].setOption(option);
      chartInstances[chartId].resize();
      return;
    }
    const chartDom = document.getElementById(chartId);
    if (!chartDom) {
      console.log('Chart container with id not found');
      return;
    }
    // 创建新实例
    const myChart = echarts.init(chartDom);
    myChart.setOption(option);
    chartInstances[chartId] = myChart; // 存储实例
  };

  // 切换 tab 的方法
  const setActiveTab = (index) => {
    console.log(index);
    activeTab.value = index;
  };

  // 监听 activeTab 的变化，在切换 tab 时更新显示
  watch(activeTab, async (newVal, oldVal) => {
    await nextTick(() => {
      const oldTab = tabs.value[oldVal];
      const oldTabDom = document.getElementById(oldTab.chartId);
      oldTabDom.style.display = 'none'; // 隐藏之前的图表

      const newTab = tabs.value[newVal];
      const newTabDom = document.getElementById(newTab.chartId);
      newTabDom.style.display = 'block'; // 显示当前图表

      // 更新图表的 option
      const myChart_1 = chartInstances[newTab.chartId];
      if (myChart_1) {
        const currentOption = myChart_1.getOption();
        if (JSON.stringify(currentOption) !== JSON.stringify(newTab.option)) {
          myChart_1.setOption(newTab.option); // 更新图表数据
        }
        myChart_1.resize(); // 更新图表尺寸
      }
    });
  });

  // 组件挂载时从接口加载 tabs 并初始化图表
  onMounted(async () => {
    try {
      const params = { phone: props.phone };
      const res = await dailySignsListData(params);
      console.log(`日常体征：` + res);
      // 适配后端返回示例：{ count: 7, list: [ { createTime, weight, heartRate, breathe, systolicPressure, diastolicPressure, bloodSugar, temperature, ... }, ... ] }
      const list = res && (res.list || res.data || []);
      let sorted = [];
      if (Array.isArray(list) && list.length) {
        // 按时间升序排列（若需要降序可改）
        sorted = [...list].sort((a, b) => new Date(a.createTime) - new Date(b.createTime));
        const xData = sorted.map((r) => r.createTime);

        // 提取各指标数组（若某些记录缺失字段会得到 undefined）
        const getSeries = (key) => sorted.map((r) => (r[key] !== undefined ? r[key] : null));

        const metrics = [
          { key: 'heartRate', label: '心率', unit: 'bpm', type: 'line' },
          { key: 'bloodSugar', label: '血糖', unit: 'mmol/L', type: 'line' },
          { key: 'systolicPressure', label: '收缩压', unit: 'mmHg', type: 'line' },
          { key: 'diastolicPressure', label: '舒张压', unit: 'mmHg', type: 'line' },
        ];

        tabs.value = metrics.map((m, idx) => {
          const seriesData = getSeries(m.key);
          const option = {
            color: ['#FF7F50', '#87CEFA'],
            title: {
              text: m.label,
              textStyle: { color: '#fff', fontSize: 12 },
            },
            grid: {
              bottom: '40px',
              left: '80px',
            },
            xAxis: {
              data: xData,
              axisLine: { lineStyle: { color: '#fff' } },
              axisLabel: { textStyle: { color: '#fff' } },
            },
            yAxis: [
              {
                position: 'left',
                axisLine: { lineStyle: { color: '#fff' } },
                axisLabel: { formatter: `{value} ${m.unit || ''}`, textStyle: { color: '#fff' } },
              },
            ],
            series: [
              {
                name: m.label,
                type: m.type || 'line',
                smooth: true,
                data: seriesData,
              },
            ],
          };
          return { label: m.label, id: idx, chartId: idx, option };
        });
        // 生成告警：从最新到最旧，检测是否存在异常，最多取 3 条
        const maxAlerts = 3;
        const found = [];
        // 从后往前遍历 sorted（sorted 是升序），因此从末尾开始为最新
        for (let i = sorted.length - 1; i >= 0 && found.length < maxAlerts; i--) {
          const r = sorted[i];
          const time = r.createTime || '';
          // 阈值（可按需调整）
          const hr = r.heartRate;
          const bs = r.bloodSugar;
          const sp = r.systolicPressure;
          const dp = r.diastolicPressure;

          if (hr !== undefined) {
            if (hr > 100) {
              found.push({ time, text: `心率 ${hr}，超出正常范围` });
              continue;
            } else if (hr < 70) {
              found.push({ time, text: `心率 ${hr}，低于正常范围` });
              continue;
            }
          }
          if (bs !== undefined) {
            if (bs > 7.8) {
              found.push({ time, text: `血糖 ${bs} mmol/L，超出正常范围` });
              continue;
            } else if (bs < 3.9) {
              found.push({ time, text: `血糖 ${bs} mmol/L，低于正常范围` });
              continue;
            }
          }
          if (sp !== undefined) {
            if (sp > 140) {
              found.push({ time, text: `收缩压 ${sp} mmHg，超出正常范围` });
              continue;
            } else if (sp < 90) {
              found.push({ time, text: `收缩压 ${sp} mmHg，低于正常范围` });
              continue;
            }
          }
          if (dp !== undefined) {
            if (dp > 90) {
              found.push({ time, text: `舒张压 ${dp} mmHg，超出正常范围` });
              continue;
            } else if (dp < 60) {
              found.push({ time, text: `舒张压 ${dp} mmHg，低于正常范围` });
              continue;
            }
          }
        }
        alerts.value = found.slice(0, maxAlerts);
      } else {
        console.warn('dailySignsListData returned empty or invalid data', res);
      }

      await nextTick();
      // 初始化每个 tab 的图表并默认隐藏
      tabs.value.forEach((tab) => {
        initChart(tab.chartId, tab.option);
        const TabDom = document.getElementById(tab.chartId);
        if (TabDom) TabDom.style.display = 'none';
      });
      // 显示当前激活 tab
      const current = tabs.value[activeTab.value];
      if (current) {
        const curDom = document.getElementById(current.chartId);
        if (curDom) curDom.style.display = 'block';
      }
      // 初始化左侧的五个 mini 图表，使用心率或其他指标的序列作为示例
      const miniIds = [
        'mini-chart-shiwangmo',
        'mini-chart-kouqiang',
        'mini-chart-shenjing',
        'mini-chart-shen',
        'mini-chart-tangniaobing',
        'mini-chart-xinxueguan',
      ];
      // 尝试使用 heartRate 序列作为示例数据，如果不存在则用空数据
      const hrSeries = Array.isArray(sorted)
        ? sorted.map((r) => (r.heartRate !== undefined ? r.heartRate : null))
        : [];
      const sampleX = Array.isArray(sorted) ? sorted.map((r) => r.createTime) : [];
      const miniOptionBase = (label, data) => ({
        tooltip: { show: false },
        grid: { left: 2, right: 2, top: 2, bottom: 2 },
        xAxis: { show: false, data: sampleX },
        yAxis: { show: false },
        series: [
          {
            type: 'line',
            data: data,
            smooth: true,
            symbol: 'none',
            lineStyle: { width: 2, color: '#00e6ff' },
            itemStyle: { color: '#00e6ff' },
            areaStyle: { color: 'rgba(0, 230, 255, 0.18)' },
          },
        ],
      });
      miniIds.forEach((id) => {
        const seriesData = hrSeries.length ? hrSeries : [null, null, null, null, null];
        initChart(id, miniOptionBase('口腔疾病', seriesData));
      });
    } catch (err) {
      console.error('Failed to load daily signs data', err);
    }
  });
</script>
<style>
  .leftSide {
    position: absolute;
    box-sizing: border-box;
    width: 50%;
    height: 100%;
    background: url('/resource/health/img/detail/底盘.png') center no-repeat;
    background-size: 45% 50%;
    /* background-position: 182px 180px; */
    background-position: 182px 340px;
  }
  .rightSide {
    box-sizing: border-box;
    float: left;
    box-sizing: border-box;
    padding-left: 55%;
    overflow-y: overlay;
    overflow-x: hidden;
    clear: both;
    /* color: #717592; */
    color: #fff;
    min-width: 100%;
    margin-top: 20px;
    /* min-height: 500px; */
    /* padding-top:40px; */
  }
  .shiwangmo {
    position: absolute;
    left: 305px;
    top: 40px;
  }
  .kouqiang {
    position: absolute;
    left: 60px;
    top: 90px;
  }
  .shenjing {
    position: absolute;
    left: 80px;
    top: 40px;
  }
  .shen {
    position: absolute;
    left: 310px;
    top: 240px;
  }
  .tangniaobing {
    position: absolute;
    left: 80px;
    top: 500px;
  }
  /* mini chart box replaces previous image at same positions */
  .mini-chart-box {
    position: absolute;
    width: 150px;
    height: 100px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #00d9f3;
  }
  .mini-chart {
    width: 140px;
    height: 64px;
  }
  .mini-label {
    position: absolute;
    /* 可通过各个 mini-chart-box 的 --label-left / --label-top 调整位置 */
    left: var(--label-left, 10px);
    top: var(--label-top, calc(100% - 20px));
    transform: translate(-50%, -50%);
    white-space: nowrap;
    font-size: 16px;
    font-weight: 700;
    color: #fff;
    background: transparent;
    /* 取消背景后用轻微文字阴影提高在复杂背景下的可读性 */
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
    padding: 6px 10px;
    border-radius: 6px;
    pointer-events: none;
  }
  /* connector line from label area pointing toward body */
  .mini-chart-box .connector {
    position: absolute;
    width: 60px; /* default length, adjusted per position */
    height: 2px;
    background: rgba(255, 255, 255, 0.85);
    border-radius: 2px;
    top: 40px; /* roughly center vertically within mini box */
    left: 60px; /* start from right side of mini box */
    transform-origin: left center;
  }
  .mini-chart-box .connector::after {
    content: '';
    position: absolute;
    right: -6px;
    top: -5px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.95);
  }

  /* 异常时只把 label 文本颜色和连线末端点设为红色（保持背景与连线不变） */
  .mini-chart-box.abnormal .mini-label {
    color: #ff4d4f; /* 红色文字 */
    background: transparent;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
  }
  .mini-chart-box.abnormal .connector::after {
    background: #ff4d4f; /* 红点 */
    box-shadow: 0 0 6px rgba(255, 77, 79, 0.25);
  }
  /* position-specific connector transforms to aim at the body center */
  /* position-specific connector vars for easy tweaking */
  .mini-chart-box.shiwangmo .connector {
    --conn-transform: rotate(180deg) translateY(-6px);
    --conn-width: 90px;
    --conn-left: 120px;
    --conn-top: 45px;
    transform: var(--conn-transform);
    width: var(--conn-width);
    left: var(--conn-left);
    top: var(--conn-top);
  }
  .mini-chart-box.kouqiang .connector {
    --conn-transform: rotate(0deg);
    --conn-width: 120px;
    --conn-left: 140px;
    --conn-top: 20px;
    transform: var(--conn-transform);
    width: var(--conn-width);
    left: var(--conn-left);
    top: var(--conn-top);
  }
  .mini-chart-box.shenjing .connector {
    --conn-transform: rotate(0deg);
    --conn-width: 80px;
    --conn-left: 160px;
    --conn-top: 30px;
    transform: var(--conn-transform);
    width: var(--conn-width);
    left: var(--conn-left);
    top: var(--conn-top);
  }
  .mini-chart-box.shen .connector {
    --conn-transform: rotate(180deg);
    --conn-width: 120px;
    --conn-left: 160px;
    --conn-top: 40px;
    transform: var(--conn-transform);
    width: var(--conn-width);
    left: var(--conn-left);
    top: var(--conn-top);
  }
  .mini-chart-box.tangniaobing .connector {
    --conn-transform: rotate(0deg);
    --conn-width: 140px;
    --conn-left: 80px;
    --conn-top: 40px;
    transform: var(--conn-transform);
    width: var(--conn-width);
    left: var(--conn-left);
    top: var(--conn-top);
  }
  .mini-chart-box.xinxueguan .connector {
    --conn-transform: rotate(180deg);
    --conn-width: 100px;
    --conn-left: 230px;
    --conn-top: 10px;
    transform: var(--conn-transform);
    width: var(--conn-width);
    left: var(--conn-left);
    top: var(--conn-top);
  }
  /* position each mini-chart-box to match original image classes */
  .mini-chart-box.shiwangmo {
    left: 305px;
    top: 40px;
    --label-left: 180px;
    --label-top: 50px;
  }
  .mini-chart-box.kouqiang {
    left: 60px;
    top: 90px;
    --label-left: 90px;
    --label-top: 20px;
  }
  .mini-chart-box.shenjing {
    left: 80px;
    top: 40px;
    --label-left: 110px;
    --label-top: 30px;
  }
  .mini-chart-box.shen {
    left: 310px;
    top: 240px;
    --label-left: 200px;
    --label-top: 45px;
  }
  .mini-chart-box.tangniaobing {
    left: 80px;
    top: 500px;
    --label-left: 30px;
    --label-top: 45px;
  }
  .mini-chart-box.xinxueguan {
    left: 220px;
    top: 180px;
    --label-left: 280px;
    --label-top: 10px;
  }
  .leftSide .humanPic {
    margin-top: 60px;
    height: 70%;
    background: url('/resource/health/img/detail/男.png') center no-repeat;
    background-size: contain;
    color: #fff;
  }
  .leftSide .shijianzhou {
    margin-top: 60px;
    height: 45%;
    color: #fff;
  }
  #leftSide .humanPic .rsImg .bottom {
    position: relative;
    left: 10px;
    font-size: 12px;
  }
  #leftSide .humanPic .xinlv .bottom {
    bottom: 60px;
  }
  #leftSide .humanPic .xueya .bottom {
    top: -26px;
  }
  #leftSide .humanPic .xuetang .bottom {
    top: 5px;
  }
  #leftSide .humanPic .shuimian .bottom {
    /* top: 5px; */
    left: 80px;
  }
  #leftSide .humanPic .tiwen .bottom {
    bottom: 20px;
    left: 112px;
  }
  #leftSide .humanPic .xueyang .bottom {
    top: 5px;
    left: 84px;
  }
  #leftSide .humanPic .rsImg .bottom .cankao {
    color: #3bced9;
    font-weight: bold;
  }
  /* #leftSide .humanPic .xinlv .top {
    position: relative;
    top: 40px;
  } */
  #leftSide .humanPic .xuetang .top {
    position: relative;
    top: 116px;
  }
  #leftSide .humanPic .shuimian .top {
    position: relative;
    /* left: 54px; */
    left: 57px;
  }
  #leftSide .humanPic .tiwen .top {
    position: relative;
    left: 74px;
  }
  #leftSide .humanPic .xueyang .top {
    position: relative;
    left: 57px;
    top: 93px;
  }
  #leftSide .humanPic .rsImg .top {
    margin-left: 15px;
  }
  #leftSide .humanPic .rsImg .top .title {
    float: left;
    position: relative;
    top: 30px;
    font-size: 18px;
  }
  #leftSide .humanPic .rsImg .top .value-box {
    float: left;
    width: 80px;
  }
  /* #leftSide .humanPic .xinlv .top .value-box {
    position: absolute;
    left: 75px;
    top: 5px;
  }
  #leftSide .humanPic .xueya .top .value-box {
    position: absolute;
    left: 75px;
    top: 3px;
  }
  #leftSide .humanPic .xuetang .top .value-box {
    position: absolute;
    left: 80px;
  } */
  /* #leftSide .humanPic .shuimian .top .value-box {
    float: left;
  }
  #leftSide .humanPic .tiwen .top .value-box {
    float: left;
  }
  #leftSide .humanPic .xueyang .top .value-box {
    float: left;
  } */
  #leftSide .humanPic .rsImg .top .value {
    position: absolute;
    font-size: 25px;
    color: #2bced9;
  }
  #leftSide .humanPic .rsImg .top .unit {
    float: left;
    position: relative;
    top: 50px;
    /* font-size: 18px; */
    margin-right: 20px;
  }
  #leftSide .humanPic .xinlv .top .value {
    left: 110px;
    top: 21px;
  }
  #leftSide .humanPic .xueya .top .value {
    left: 55px;
    top: 3px;
  }
  #leftSide .humanPic .xuetang .top .value {
    left: 114px;
    top: 20px;
  }
  #leftSide .humanPic .shuimian .top .value {
    left: 27px;
    top: 20px;
  }
  #leftSide .humanPic .tiwen .top .value {
    left: 22px;
    top: 23px;
    font-size: 21px;
  }
  #leftSide .humanPic .xueyang .top .value {
    top: 17px;
    left: 24px;
  }
  .text-grey {
    color: #8d8d8d;
  }
  /* 那几个血糖血氧的具体位置 */
  /* 血压 */
  #leftSide .humanPic .rsImg:first-child {
    position: absolute;
    top: 28%;
    right: 59%;
  }
  /* 心率 */
  #leftSide .humanPic .rsImg:nth-child(2) {
    position: absolute;
    top: 3%;
    right: 60%;
    width: 250px;
  }
  /* 体温 */
  #leftSide .humanPic .rsImg:nth-child(3) {
    position: absolute;
    top: 26%;
    right: 0%;
  }
  /* 睡眠 */
  #leftSide .humanPic .rsImg:nth-child(4) {
    position: absolute;
    top: 4%;
    right: 0%;
  }
  /* 血氧 */
  #leftSide .humanPic .rsImg:nth-child(5) {
    position: absolute;
    top: 38%;
    right: 0%;
  }
  /* 血糖 */
  #leftSide .humanPic .rsImg:nth-child(6) {
    position: absolute;
    top: 36%;
    right: 60%;
  }
  .footer {
    width: 800px;
    position: absolute;
    left: 8%;
    bottom: 7%;
    color: #fff;
    line-height: 20px;
    font-size: 12px;
  }
  #rightSide .userInfo {
    /* background-color: #042343; */
    width: 90%;
  }
  #rightSide .userInfo .border_1 {
    width: 100%;
  }

  #rightSide .userInfo .photo {
    width: 15%;
    float: left;
    padding-left: 10px;
    padding-top: 10px;
  }

  #rightSide .userInfo .photo img {
    width: 85%;
  }

  #rightSide .userInfo .intro {
    float: left;
    width: 80%;
    display: table-cell;
    /*按照bai单元格的样式显示元素*/
    vertical-align: bottom;
    /* background: #1B6D85; */
    margin-left: 3%;
    padding-top: 6px;
  }
  #rightSide .userInfo .intro .title {
    /* font-size: x-large; */
    color: #00d9f3;
  }
  #rightSide .userInfo .intro .desc {
    font-size: 16px;
    line-height: 30px;
    margin-top: -18px;
  }
  #rightSide .userInfo .intro .fenge {
    margin-top: 10px;
  }
  #rightSide .userInfo .intro .result {
    background: url('/resource/health/img/detail/控制满意.png') center no-repeat;
    /* background-size: 110% 100%; */
    color: #00d9f3;
    height: 30px;
  }

  #rightSide .userInfo .info ul {
    margin: 0px;
    padding: 0px;
    font-size: normal;
    height: 50px;
    list-style-type: none;
    padding-left: 50px;
  }

  #rightSide .userInfo .info ul:last-child {
    border-bottom: none;
  }

  #rightSide .userInfo .info li {
    line-height: 30px;
    float: left;
    margin-right: 30px;
  }

  #rightSide .userInfo .right {
    float: right !important;
  }

  #rightSide .userInfo .info span {
    /* font-size: x-large; */
    color: #00d9f3;
  }

  #rightSide .title {
    font-size: large;
    color: #5cffe0;
  }

  #rightSide .warning-box {
    /* margin:5px 0; */
    width: 90%;
    font-size: 14px; /* 增大一号，满足用户要求 */
    margin-top: 10px;
  }

  #rightSide .warning-box h3 {
    font-weight: bold;
    color: #00d9f3;
    background: url('/resource/health/img/detail/标题.png') center no-repeat;
    background-size: 100%;
    width: 100%;
    padding-left: 40px;
    font-size: 16px;
    /* height: 35px; */
    line-height: 30px;
  }
  #rightSide .warning-box ul {
    width: 96%;
    max-height: 200px;
    list-style: none;
  }
  #rightSide .warning-box ul li {
    line-height: 25px;
    margin: 5px 0;
    border-left: 4px solid red;
    background-color: rgb(255 0 0 / 25%);
    width: 100%;
    padding-left: 20px;
  }
  #rightSide .warning-box ul li span {
    margin-left: 10px;
    vertical-align: middle;
  }
  #rightSide .chart-info {
    width: 90%;
    margin-top: 15px;
  }
  #rightSide .chart-info ul {
    font-weight: bold;
    color: #00d9f3;
    background: url('/resource/health/img/detail/标题.png') center no-repeat;
    background-size: 100%;
    width: 100%;
    padding-left: 30px;
    font-size: 16px;
    /* height: 35px; */
    line-height: 30px;
    margin-bottom: 5px;
  }
  #rightSide .nav > li > a {
    padding: 0 15px;
    color: #337ab7;
  }
  .nav-pills > li.active > a,
  .nav-pills > li.active > a:hover,
  .nav-pills > li.active > a:focus {
    background: none !important;
    color: #00d3f0 !important;
  }
  #rightSide .nav > li > a:hover,
  .nav > li > a:focus {
    background: none !important;
  }
  .footer-value-box {
    width: 100%;
    display: inline-block;
    /* font-size: 20px; */
    line-height: 30px;
    /* text-align: center; */
  }
  /* .footer-time-box removed to avoid empty ruleset */
  .footer-value {
    color: #2bced9;
    font-weight: bold;
    font-size: 20px;
  }
  .footer-wendu {
    width: 50%;
    float: left;
  }
  .footer-shidu {
    width: 50%;
    float: right;
  }
  .line-width {
    width: 280px;
  }
  .left,
  .right {
    flex: 2; /* 使它们平分宽度 */
  }
  .left {
    text-align: left; /* 文字居中对齐 */
  }
  .right {
    text-align: center; /* 文字居中对齐 */
  }
  /* 使用 flexbox 让标签水平排列 */
  .horizontal-tabs {
    display: flex;
    list-style: none;
    padding: 0;
    margin: 0;
    justify-content: space-around; /* 标签之间等间距 */
  }

  .horizontal-tabs li {
    margin-right: 10px; /* 标签之间的间距 */
  }

  .horizontal-tabs a {
    padding: 10px 20px;
    text-decoration: none;
    color: #000;
  }

  .horizontal-tabs li.active a {
    background-color: #007bff; /* 激活标签的背景色 */
    color: white;
  }
</style>
